<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文章列表</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      margin: 0;
      padding: 20px;
    }

    .container {
      max-width: 800px;
      margin: 0 auto;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      padding: 20px;
    }

    .article-item {
      border-bottom: 1px solid #eee;
      padding: 15px 0;
    }

    .article-item:last-child {
      border-bottom: none;
    }

    .article-title {
      font-size: 18px;
      font-weight: bold;
      color: #333;
      margin-bottom: 8px;
    }

    .article-title a {
      color: #333;
    }

    .article-content {
      color: #666;
      line-height: 1.5;
    }

    .article-meta {
      font-size: 12px;
      color: #999;
      margin-top: 8px;
    }

    .nav {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-top: 20px;
      font-size: 20px;
    }

    .nav a {
      color: #333;
      text-decoration: none;
      transition: color 0.3s ease;
      background-color: #eee;
      padding: 10px 20px;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      margin-right: 20px;
    }

    .nav a:hover {
      color: #fff;
      background-color: #007bff;
    }

    .article-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    /* Modal styles */
    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgb(0, 0, 0);
      background-color: rgba(0, 0, 0, 0.4);
    }

    .modal-content {
      background-color: #fefefe;
      margin: 15% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
      max-width: 500px;
      border-radius: 5px;
    }

    .close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
    }

    .close:hover,
    .close:focus {
      color: black;
      text-decoration: none;
    }

    .form-group {
      margin-bottom: 15px;
    }

    .form-group label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }

    .form-group input,
    .form-group textarea {
      width: 100%;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
    }

    .form-group textarea {
      height: 200px;
      resize: vertical;
    }

    .btn {
      background-color: #007bff;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
    }

    .btn:hover {
      background-color: #0056b3;
    }

    .btn-cancel {
      background-color: #6c757d;
      margin-right: 10px;
    }

    .btn-cancel:hover {
      background-color: #545b62;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body class="bg-gray-100 min-h-screen flex flex-col">
  <div class="container">
    <header>
      <h1>Goframe Demo</h1>
      <p class="text-gray-600">
        Goframe框架 + 静态模版 + API +
        WebSocket + 聊天 + 实时价格盘
      </p>

      <div class="nav">
        <a href="/">首页</a>
        <a href="/art">文章</a>
        <a href="/chat">聊天</a>
        <a href="/ws">金价</a>
      </div>
    </header>
    <div class="article-header">
      <h1 class="text-2xl font-bold">文章列表</h1>
      <button id="showFormBtn" class="btn">发布文章</button>
    </div>

    {{if .artList}}
    {{range .artList}}
    <div class="article-item">
      <div class="article-title">
        <a href="/detail/{{.Id}}">{{.Title}}</a>
        <div class="article-meta"><a onclick="edit({{.Id}})">编辑</a> | <a onclick="del({{.Id}})">删除</a></div>
      </div>
    </div>
    {{end}}
    <div class="text-gray-600">共 {{len .artList}} 篇文章</div>
    {{else}}
    <p>暂无文章</p>
    {{end}}
    
  </div>

  <!-- 发布文章表单弹窗 -->
<!-- 发布文章表单弹窗 -->
<div id="articleModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2 id="active">发布/编辑文章</h2>
    <form id="articleForm">
      <!-- 添加隐藏的 ID 字段 -->
      <input type="hidden" id="id" name="id">
      <div class="form-group">
        <label for="title">标题:</label>
        <input type="text" id="title" name="title" required>
      </div>
      <div class="form-group">
        <label for="content">内容:</label>
        <textarea id="content" name="content" required></textarea>
      </div>
      <button type="button" class="btn btn-cancel" id="cancelBtn">取消</button>
      <button type="submit" class="btn" id="postBtn">发布</button>
    </form>
  </div>
</div>

  <script>
    // 在全局作用域中定义 modal 变量
    var modal;
  
    // 编辑文章
    function edit(id) { 
      $.ajax({
        url: "/apidetail/" + id,
        type: "GET",
        success: function(response) {
          if (response.code !== 0) {
            alert("获取文章失败: " + response.msg);
            return;
          }else{
            modal.css("display", "block");
            $("#id").val(response.data.id);
            $("#title").val(response.data.title);
            $("#content").val(response.data.content);

            $("#active").text("编辑文章");
            $("#postBtn").text("保存");
          }
        },
        error: function(xhr, status, error) {
          alert("获取文章失败: " + error);
        }
      });
    }
  
    // 删除文章
    function del(id) { 
      if (confirm("确定要删除这篇文章吗？")) {
        $.ajax({
          url: "/apidetail/" + id,
          type: "DELETE",
          success: function(response) {
            alert("文章删除成功！");
            location.reload();
          },
          error: function(xhr, status, error) {
            alert("删除失败: " + error);
          }
        });
      }
    }
  
    $(document).ready(function() {
      // 初始化 modal 变量
      modal = $("#articleModal");
      var btn = $("#showFormBtn");
      var span = $(".close");
      var cancelBtn = $("#cancelBtn");
  
      // 点击发布文章按钮时显示模态框
      btn.click(function() {
        // 清空表单
        $("#active").text("发布文章");
        $("#postBtn").text("发布");
        $("#articleForm")[0].reset();
        modal.css("display", "block");
      });
  
      // 点击关闭按钮(x)时关闭模态框
      span.click(function() {
        modal.css("display", "none");
      });
  
      // 点击取消按钮时关闭模态框
      cancelBtn.click(function() {
        modal.css("display", "none");
      });
  
      // 点击模态框外部区域时关闭模态框
      $(window).click(function(event) {
        if (event.target == modal[0]) {
          modal.css("display", "none");
        }
      });
  
      // 处理表单提交
      $("#articleForm").submit(function(e) {
        e.preventDefault();
  
        // 获取表单数据
        var formData = {
          title: $("#title").val(),
          content: $("#content").val(),
          author: $("#author").val(),
          class_id: 1
        };
  
        // 检查是创建还是更新
        var method = "POST";
        var url = "/apidetail/";
        
        // 如果有ID则为更新操作
        if ($("#id").val()) {
          method = "PUT";
          url = "/apidetail/" + $("#id").val();
          formData.id = $("#id").val();
        }
  
        // 发送请求到API接口
        $.ajax({
          url: url,
          type: method,
          contentType: "application/json",
          data: JSON.stringify(formData),
          success: function(response) {
            modal.css("display", "none");
            location.reload(); // 刷新页面显示最新数据
          },
          error: function(xhr, status, error) {
            alert("操作失败: " + error);
          }
        });
      });
    });
  </script>
</body>

</html>